<template>
  <div class="card" :style="{ background: randomBg() }">
    <div class="header">
      <img :src="icon" alt="" />
      <span>{{ name }}</span>
    </div>
  </div>
</template>

<script>
const bgs = [
  "linear-gradient(177deg, #6da1ff -12%, #062dff 83%)",
  "linear-gradient(168deg, #f8897d -10%, #ec6265 61%)",
  "linear-gradient(172deg, #6ddad7 -10%, #3daeb2 58%)",
  "linear-gradient(177deg, #6da1ff -12%, #062dff 83%)",
  "linear-gradient(168deg, #f8897d -10%, #ec6265 61%)",
  "linear-gradient(172deg, #6ddad7 -10%, #3daeb2 58%)",
  "linear-gradient(177deg, #6da1ff -12%, #062dff 83%)",
  "linear-gradient(168deg, #f8897d -10%, #ec6265 61%)",
  "linear-gradient(172deg, #6ddad7 -10%, #3daeb2 58%)"
];
export default {
  name: "Card",
  props: {
    // icon: {
    //   type: Object,
    //   default: () => {
    //     return require("@/assets/img/logo.png");
    //   }
    // },
    icon: String,
    name: String,
    index: Number
  },
  data() {
    return {};
  },
  methods: {
    randomBg() {
      // return bgs[Math.floor(Math.random() * bgs.length)];
      return bgs[this.index];
    }
  }
};
</script>

<style scoped lang="less">
.card {
  width: 345px;
  height: 100px;
  //background: linear-gradient(177deg, #6da1ff -12%, #062dff 83%);
  //background: linear-gradient(168deg, #f8897d -10%, #ec6265 61%);
  //background: linear-gradient(172deg, #6ddad7 -10%, #3daeb2 58%);
  border-radius: 10px;

  .header {
    display: flex;
    align-items: center;
    height: 54px;
    padding: 0 20px;

    img {
      width: 24px;
      height: 24px;
    }

    span {
      margin-left: 15px;
      height: 22px;
      line-height: 22px;
      font-size: 16px;
      font-weight: 500;
      color: #ffffff;
    }
  }
}
</style>
